<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Test21</title>
    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
    <script crossorigin="anonymous"
            integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg=="
            src="https://lib.baomitu.com/jquery/3.5.1/jquery.min.js">
    </script>
</head>
<body>
<h1 style="text-align: center">HTML复习历程-21</h1>
<div id="app">
    <p>jquery练习</p>
    <p>点击事件</p>
    <span>点我隐藏1</span>
    <br>
    <span>点我隐藏2</span>
    <br>

    <p><strong>jquery语法:</strong></p>
    <p>$(this).hide()隐藏当前元素</p>
    <p>$("p").hide()隐藏所有p元素</p>
    <p>$("p.test").hide()隐藏所有class="test"的p元素</p>
    <p>$("#test").hide()隐藏id="test"的元素</p>
    <br>
    <br>
    <p>
        $(document).ready(function(){})
        <br>
        这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码，即在 DOM 加载完成后才可以对 DOM 进行操作。
        <br>
        如果在文档没有完全加载之前就运行函数，操作可能失败。下面是两个具体的例子：
        <br>
        试图隐藏一个不存在的元素
        <br>
        获得未完全加载的图像的大小
    </p>
</div>
<script>
    $(document).ready(function () {
        $("span").click((function () {
            $(this).hide()
        }))
    })
</script>
</body>
</html>